$primary-color: #2c68f3;

p {
  padding: 0;
  margin: 0;
}

.color-primary {
  color: $primary-color;
}

// 定义滚动条
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #fff;
  -webkit-box-shadow: inset 0 0 6px #fff;
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px #5282be;
  -webkit-box-shadow: inset 0 0 6px #5282be;
  background-color: #5282be;
}

body .el-dialog__body {
  padding: 5px 10px 10px;
}

body .el-dialog__header {
  // padding-bottom: 10px;
  background-color: $primary-color;
  .el-dialog__title,
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}

$dark-bg: #000928;
$custom-table-bg: transparent;
$active-bg: #ffffff;

.dark-bg {
  background-color: $dark-bg;
}

.el-table thead {
  color: #000000;
}

$border-color: rgba(255, 255, 255, 0.3);

.transparent-table,
.el-table.transparent-table,
.transparent-table .el-table {
  background-color: $custom-table-bg;
  color: #ffffff;
  border-color: $border-color;
  th,
  tr,
  thead,
  .el-table__body-wrapper,
  table,
  .el-table__fixed-footer-wrapper tbody td {
    background-color: transparent;
    color: #ffffff;
    border-color: $border-color;
  }
  tr.el-table__row:hover,
  tr.el-table__row--striped.hover-row {
    background-color: $active-bg;
    color: #404040;
  }
  td {
    border-width: 0;
    border-bottom: 0 solid transparent;
  }
  &::before {
    height: 0;
  }
  .el-table__fixed {
    background-color: inherit;
  }
  &.el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #0c2e57;
  }
  .el-table__fixed-right::before,
  .el-table__fixed::before {
    height: 0;
  }
  .el-table--border::after,
  .el-table--group::after {
    background-color: $border-color;
  }

  .hover-cls {
    background-color: #ffffff;
    color: #000000;
  }

  tr.el-table__row.el-table__row--striped:hover td {
    // @extend .hover-cls;
    background-color: #ffffff;
    color: #000000;
  }

  .el-table__footer-wrapper tbody td,
  .el-table__header-wrapper tbody td {
    background-color: inherit;
    color: #ffffff;
  }

  // .el-table__fixed .el-table__fixed-body-wrapper {
  //   tr.el-table__row.hover-row， tr.el-table__row--striped.hover-row {
  //     @extend .hover-cls;
  //     color: red;
  //     // background-color: #ffffff;
  //     td {
  //       // @extend .hover-cls;
  //       // background-color: #ffffff;
  //     }
  //   }
  // }
}

.transparent-bg {
  &.el-button,
  &.el-date-editor,
  &.el-date-editor .el-input__inner,
  &.el-range-editor.el-input__inner,
  &.el-range-editor .el-range-input,
  &.el-date-editor .el-range-separator {
    background-color: transparent;
    color: #fff;
  }
}

.d-i-b {
  display: inline-block;
}

.align-center {
  text-align: center;
}

@each $i in 4, 5, 10, 16 {
  .m-#{$i} {
    margin: #{$i}px;
  }

  .m-t-#{$i} {
    margin-top: #{$i}px;
  }

  .m-b-#{$i} {
    margin-bottom: #{$i}px;
  }

  .m-l-#{$i} {
    margin-left: #{$i}px;
  }

  .m-r-#{$i} {
    margin-right: #{$i}px;
  }

  .m-tb-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }

  .m-lr-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }

  .p-#{$i} {
    padding: #{$i}px;
  }

  .p-t-#{$i} {
    padding-top: #{$i}px;
  }

  .p-b-#{$i} {
    padding-bottom: #{$i}px;
  }

  .p-l-#{$i} {
    padding-left: #{$i}px;
  }

  .p-r-#{$i} {
    padding-right: #{$i}px;
  }

  .p-tb-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }

  .p-lr-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}
